<template>
  <div>
    <Search_top/>
    <!-- <p>{{ route.query.name }}</p> -->
    <div class="cont">
      <div v-for="item in searchResults" :key="item.id" class="cont_a">
        <img :src="item.img" alt="" />
        <p style="margin-left: 3px">{{ item.name }}</p>
        <p style="margin-left: 3px; font-size: 12px; color: gainsboro">
          <span
            ><s>{{ item.price_y }}.00</s></span
          >
          <span style="float: right; margin-right: 10px; color: blue">加入购物车</span>
        </p>
        <p style="margin-left: 3px; color: red">
          <span style="font-size: 12px">￥</span> {{ item.price }}.00
          <span style="float: right; margin-right: 10px">
            <button class="c_btn">直接购买</button>
          </span>
        </p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import Search_top from './Search_top.vue'
import axios from 'axios'

const route = useRoute()
// console.log(route)

const searchName = ref('')
const searchResults = ref([])

// 获取搜索名称并请求对应的数据
onMounted(async () => {
  searchName.value = route.query.name || '' // 获取搜索名称
//   console.log(searchName.value);
  
  if (searchName.value) {
    try {
      const response = await axios.get(`http://localhost:3000/dyx/home?name=${searchName.value}`)
      searchResults.value = response.data.data || [] // 假设返回的数据结构
    //   console.log(response);
      
    } catch (error) {
      console.error('获取搜索结果失败:', error)
    }
  }
})



</script>

<style scoped>
.cont {
  width: 98%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}
.cont img {
  width: 150px;
  height: 145px;
  margin: 15px;
}
.cont_a {
  width: 48%;
  height: 295px;
  background-color: white;
  margin: 3.5px;
  border-radius: 10px;
}
.c_btn {
  border: none;
  background: rgba(225, 57, 64);
  color: white;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 10px;
}
</style>